import { filter } from 'rxjs/operators';
import { Component, OnInit, Input, ViewChild } from '@angular/core';

import { ModalController, NavParams, Platform, IonSlides } from '@ionic/angular';
import { PageModalService } from 'src/app/shared/service/page-modal-service';

import { ImgSlidePage } from './img-slide.page';
@Component({
  selector: 'app-slides-imgage',
  templateUrl: './slides-imgage.component.html',
  styleUrls: ['./slides-imgage.component.scss']
})
export class SlidesImgageComponent implements OnInit {

  @Input() tagData: any;
  @Input() videoSrc: any;
  @Input() autoPlay: any;
  @Input() type: any;
  @Input() link: any;
  @Input() updateLink: any;
  @ViewChild('slideImg') slides: any =  IonSlides;
  slideOpts: any;
  index: any = 1;
  flag: any = true;
  cssStyle: any;
  videoUrl = "http://oss-ppw.pupuwang.com/video_d38e3bf3a8999aebca8331b01b509d55.mp4";
  video: any;
  boxCssStyle: any;
  showViewDetailBtn = false;
  viewDetailBtn: any;
  constructor(
    private modalCtrl: ModalController,
    private pageModalService: PageModalService,
  ) { }

  ngOnInit() {
    // console.log('msg----->' + this.tagData);
    if (this.tagData.cssStyle) {
      this.cssStyle = {};
      const cssStyles = this.tagData.cssStyle.split(";");
      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < cssStyles.length; i++) {
        const cssStrs = cssStyles[i].split(":");
        this.cssStyle[cssStrs[0]] = cssStrs[1];
      }
      // console.log(this.cssStyle);
    }
    if (!this.tagData.images || !this.tagData.images.length) {
      this.flag = false;
      // ? this.tagData.images = ['../../../assets/img/375x250@2x.png'];
    } else {
      localStorage.setItem('shareOppDetailImages', this.tagData.images[0]);
    }
    if (this.videoSrc) {
      this.tagData.images.unshift({ type: 'video', videoSrc: this.videoSrc });
    }
    if (this.tagData.data && this.tagData.data.boxCssStyle) {
      this.boxCssStyle = this.tagData.data.boxCssStyle;
    }
    if (this.tagData.data && this.tagData.data.showViewDetailBtn) {
      this.showViewDetailBtn = this.tagData.data.showViewDetailBtn;
    }
    if (this.tagData.data && this.tagData.data.viewDetailBtn) {
      this.viewDetailBtn = this.tagData.data.viewDetailBtn;
    }

    setTimeout(() => {
      const ele = document.querySelectorAll('video[ishivideo="true"]');
      this.video = ele;
    }, 1);
  }

  getprevIndex() {
    this.index -= 1;
    if (this.slides.el && this.slides.el.swiper && this.slides.el.swiper.realIndex !== undefined) {
      if (this.index > (this.slides.el.swiper.realIndex + 1)) {
        this.index = this.slides.el.swiper.realIndex + 1;
      }
    }
  }

  getnextIndex() {
    if (this.video && this.video[this.index - 1] && this.video[this.index - 1].paused === false) {
      this.video[this.index - 1].pause();
      const btn = this.queryById('id-centerPlayIcon' + (this.index - 1));
      if(btn){
        btn.setAttribute("class", 'hi-video-playIcon onBtn');
      }
      
    }
    this.index += 1;
    if (this.slides.el && this.slides.el.swiper && this.slides.el.swiper.realIndex !== undefined) {
      if (this.index < (this.slides.el.swiper.realIndex + 1)) {
        this.index = this.slides.el.swiper.realIndex + 1;
      }
    }
  }

  // 打开图片展示框，滑动展示
  async openImg(tmpIndex) {
    // 大图预览时候排除视频
    let img = [];
    if (this.videoSrc) {
      img = this.tagData.images.filter((_, index) => index !== 0);
      tmpIndex -= 1;
    } else {
      img = this.tagData.images;
    }
    const value = {img, index: tmpIndex , download: this.tagData.download};
    const modal = await this.modalCtrl.create({
      component: ImgSlidePage,
      componentProps: { value: JSON.stringify(value) }
    });
    return await modal.present();
  }

  //
  gotoPage(e) {
    e.stopPropagation();
    if (this.link !== undefined ) {
      this.pageModalService.openPage(this.link);
      this.pageModalService.appGlobalService.eventService.eventEmit.emit("stopPlay", "1");
    }
  }

  goPage(currentLink, e) {
    e.stopPropagation();
    if (currentLink !== undefined) {
      this.pageModalService.openPage(currentLink);
      return;
    }
  }

  queryById(selector) {
    return document.getElementById(selector);
  }
}
